﻿<!doctype html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>基于Bootstrup的强大jQuery表单验证插件|tooltip_jQuery之家-自由分享jQuery、html5、css3的插件库</title>
	<!-- Include the FontAwesome CSS if you want to use feedback icons provided by FontAwesome -->
    <link href="~/Scripts/lib/adminlte/fonts/css/font-awesome.min.css" rel="stylesheet" />
    <!--<link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.css"/>-->
    <link rel="stylesheet" href="/Scripts/lib/adminlte/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/Scripts/lib/adminlte/dist/css/AdminLTE.min.css">
	<!--[if IE]>
		<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
	<![endif]-->
</head>
<body>
	
	<div class="htmleaf-container">
		<div class="container">
	        <div class="row">
	            <section>
	                <div class="col-sm-8 col-sm-offset-2">
	                    <div class="page-header">
	                        <h2>Tooltip container</h2>
	                    </div>

	                    <form id="defaultForm" method="post" class="form-horizontal" action="target.php">
	                        <div class="form-group">
	                            <label class="col-sm-3 control-label">First name</label>
	                            <div class="col-sm-4">
	                                <input type="text" class="form-control" name="firstName" placeholder="First name" />
	                            </div>
	                        </div>

	                        <div class="form-group">
	                            <label class="col-sm-3 control-label">Last name</label>
	                            <div class="col-sm-4">
	                                <input type="text" class="form-control" name="lastName" placeholder="Last name" />
	                            </div>
	                        </div>

	                        <div class="form-group">
	                            <div class="col-sm-9 col-sm-offset-3">
	                                <button type="submit" class="btn btn-primary">Validate</button>
	                            </div>
	                        </div>
	                    </form>
	                </div>
	            </section>
	        </div>
	    </div>
        	  
	</div>
	
    <script src="/Scripts/lib/adminlte/plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="/Scripts/lib/adminlte/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="dist/js/formValidation.js"></script>
    <script type="text/javascript" src="dist/js/framework/bootstrap.js"></script>
    <script type="text/javascript" src="dist/js/language/zh_CN.js"></script>
    <script type="text/javascript">
		$(document).ready(function() {
		    $('#defaultForm').formValidation({
		        err: {
		            container: 'tooltip'
		        },
		//        trigger: 'blur',
		        icon: {
		            valid: 'glyphicon glyphicon-ok',
		            invalid: 'glyphicon glyphicon-remove',
		            validating: 'glyphicon glyphicon-refresh'
		        },
		        fields: {
		            firstName: {
		                validators: {
		                    stringLength: {
		                        enabled: false,
		                        min: 4,
		                        message: 'The first name must be more than 5 characters'
		                    },
		                    notEmpty: {
		                        message: 'The first name is required'
		                    },
		                    regexp: {
		                        enabled: true,
		                        regexp: /^[a-z]+$/i,
		                        message: 'The first name must consist of a-z, A-Z characters only'
		                    }
		                }
		            },
		            lastName: {
		                validators: {
		                    stringLength: {
		                        min: 4,
		                        message: 'The last name must be more than 5 characters'
		                    },
		                    notEmpty: {
		                        message: 'The last name is required'
		                    },
		                    regexp: {
		                        regexp: /^[a-z]+$/i,
		                        message: 'The last name must consist of a-z, A-Z characters only'
		                    }
		                }
		            }
		        }
		    });
		});
	</script>
</body>
</html>